<!doctype html>
<html lang="en">
  <head>
    <title>Vis Network | Edge Styles | Arrow Types</title>

    <script
      type="text/javascript"
      src="../../../standalone/umd/vis-network.min.js"
    ></script>

    <style type="text/css">
      #mynetwork {
        width: 600px;
        height: 540px;
        border: 1px solid lightgray;
      }
    </style>
  </head>
  <body>
    <p>The types of endpoints. The default is <code>'arrow'</code>.</p>
    <p id="arrow_type_list"></p>

    <div id="mynetwork"></div>

    <script type="text/javascript">
      var arrow_types = [
        "arrow",
        "bar",
        "circle",
        "box",
        "crow",
        "curve",
        "inv_curve",
        "diamond",
        "triangle",
        "inv_triangle",
        "vee",
      ];

      // update list of arrow types in html body
      var nof_types = arrow_types.length;
      var mylist = document.getElementById("arrow_type_list");
      while (mylist.firstChild) {
        mylist.removeChild(mylist.firstChild);
      }
      for (var i = 0; i < nof_types; i++) {
        if (i > 0) {
          mylist.appendChild(document.createTextNode(", "));
        }
        const code = document.createElement("code");
        code.innerText = arrow_types[i];
        mylist.appendChild(code);
      }

      // create an array with nodes
      var node_attrs = new Array();
      var nodes = arrow_types.slice();
      nodes.push("end");
      console.log(nodes);
      var nof_nodes = nodes.length;
      for (var i = 0; i < nof_nodes; i++) {
        node_attrs[i] = {
          id: i + 1,
          label: nodes[i],
        };
      }

      var nodes = new vis.DataSet(node_attrs);

      // create an array with edges
      var edge_attrs = new Array();
      var nof_edges = nof_nodes - 1;
      for (var i = 0; i < nof_edges; i++) {
        edge_attrs[i] = {
          from: i + 1,
          to: i + 2,
          arrows: {
            to: {
              enabled: true,
              type: arrow_types[i],
            },
          },
        };
      }

      var edges = new vis.DataSet(edge_attrs);

      // create a network
      var container = document.getElementById("mynetwork");
      var data = {
        nodes: nodes,
        edges: edges,
      };

      var options = {
        /*
    // Enable this to make the endpoints smaller/larger
    edges: {
      arrows: {
        to: {
          scaleFactor: 5
        }
      }
    }
*/
      };

      var network = new vis.Network(container, data, options);
    </script>
  </body>
</html>
